<template>
  <el-dialog
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible="visible"
    :title="$t('openPreparation.openPreparation6')"
    width="1100px"
  >
    <!-- 开户准备 -->
    <el-form
      :model="ruleSubForm"
      ref="ruleSubForm"
      label-width="130px"
      :rules="rules"
    >
      <!-- 开户所需 ，备注（中英） -->
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openPreparation.openPreparation4') +
            '(' +
            $t('openCheck.openCheck12') +
            ')'
          "
          prop="name_zh"
        >
          <el-input v-model="ruleSubForm.name_zh"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openPreparation.openPreparation4') +
            '(' +
            $t('openCheck.openCheck13') +
            ')'
          "
          prop="name_en"
        >
          <el-input v-model="ruleSubForm.name_en"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openPreparation.openPreparation4') +
            '(' +
            $t('openCheck.openCheck26') +
            ')'
          "
          prop="name_tc"
        >
          <el-input v-model="ruleSubForm.name_tc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openCheck.openCheck6') + '(' + $t('openCheck.openCheck12') + ')'
          "
          prop="remark_zh"
        >
          <el-input type="textarea" v-model="ruleSubForm.remark_zh"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openCheck.openCheck6') + '(' + $t('openCheck.openCheck13') + ')'
          "
          prop="remark_en"
        >
          <el-input type="textarea" v-model="ruleSubForm.remark_en"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          :label="
            $t('openCheck.openCheck6') + '(' + $t('openCheck.openCheck26') + ')'
          "
          prop="remark_tc"
        >
          <el-input type="textarea" v-model="ruleSubForm.remark_tc"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 图标 -->
        <upload-tag
          :value.sync="ruleSubForm.pic"
          :propValue="'pic'"
          :labelRuleValue="{
            title: $t('openPreparation.openPreparation3'),
            rule: 'required',
            type: '1',
          }"
          :FormName="'ruleSubForm'"
          @getFileVail="getFileVail"
        ></upload-tag>
      </el-col>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['ready@update']) && ruleSubForm.id) ||
        (checkPermission(['ready@save']) && !ruleSubForm.id)
      "
    >
      <el-button type="info" plain @click="cancel">
        {{ $t("common.common1") }}
      </el-button>
      <el-button
        :loading="submitLoading"
        type="primary"
        plain
        @click="submit('ruleSubForm')"
      >
        {{ $t("common.common2") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { CusInfo, addItem, updateItem } from "@/api/systems/openPreparation";
import UploadTag from "@/components/typeTag/UploadTag";
export default {
  components: {
    UploadTag,
  },
  data() {
    return {
      visible: false,
      submitLoading: false,
      ruleSubForm: {},
      rules: {
        name_zh: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openPreparation.openPreparation4") +
              "(" +
              this.$t("openCheck.openCheck12") +
              ")",
            trigger: "blur",
          },
        ],
        name_en: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openPreparation.openPreparation4") +
              "(" +
              this.$t("openCheck.openCheck13") +
              ")",
            trigger: "blur",
          },
        ],
        name_tc: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openPreparation.openPreparation4") +
              "(" +
              this.$t("openCheck.openCheck26") +
              ")",
            trigger: "blur",
          },
        ],
        remark_zh: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openCheck.openCheck6") +
              "(" +
              this.$t("openCheck.openCheck12") +
              ")",
            trigger: "blur",
          },
        ],
        remark_en: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openCheck.openCheck6") +
              "(" +
              this.$t("openCheck.openCheck13") +
              ")",
            trigger: "blur",
          },
        ],
        remark_tc: [
          {
            required: true,
            message:
              this.$t("common.common26") +
              this.$t("openCheck.openCheck6") +
              "(" +
              this.$t("openCheck.openCheck26") +
              ")",
            trigger: "blur",
          },
        ],
        pic: [
          {
            required: true,
            message:
              this.$t("common.common28") +
              this.$t("openPreparation.openPreparation3"),
            trigger: "change",
          },
        ],
      },
      type: "", //位置
    };
  },
  methods: {
    init(type, rowID) {
      this.type = type;
      if (rowID) {
        //编辑
        CusInfo(rowID)
          .then((res) => {
            if (res.code == 10000) {
              this.ruleSubForm = res.data;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
      } else {
        //新增
        this.ruleSubForm = {};
      }
      this.visible = true;
    },
    cancel() {
      this.ruleSubForm = {};
      this.$refs.ruleSubForm.resetFields();
      this.visible = false;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // `是否确认提交?`, "提示",
          this.$confirm(this.$t("common.common29"), this.$t("common.common5"), {
            confirmButtonText: this.$t("common.common2"),
            cancelButtonText: this.$t("common.common1"),
            type: "warning",
          })
            .then(() => {
              this.submitLoading = true;
              if (this.ruleSubForm.id) {
                //编辑
                updateItem(this.ruleSubForm.id, {
                  type: this.type,
                  ...this.ruleSubForm,
                })
                  .then((res) => {
                    this.submitLoading = false;
                    if (res.code == 10000) {
                      this.cancel();
                      this.$parent.getList();
                    }
                  })
                  .catch((error) => {
                    this.$message.error(error.Error);
                  });
              } else {
                //新增
                addItem({
                  type: this.type,
                  ...this.ruleSubForm,
                })
                  .then((res) => {
                    this.submitLoading = false;
                    if (res.code == 10000) {
                      this.cancel();
                      this.$parent.getList();
                    }
                  })
                  .catch((error) => {
                    this.$message.error(error.Error);
                  });
              }
            })
            .catch(() => {});
        }
      });
    },
    getFileVail(formField, FormName) {
      this.$refs[FormName].validateField([formField], (valid) => {});
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>